<template>
  <div style="padding: 22px 10px 10px">
    <h4 class="autotitle">角色管理</h4>

    <div>
      <div class="userm">
        <div class="roles" v-for="role in roleList" :key="role.id">
          <div class="rolesInfo">
            <li class="rolesName"><span>{{role.id}}</span></li>
            <li class="rolesBiog"><span>{{ role.name }}</span></li>
          </div>

          <div class="rolesButton">
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="showPerms(role.id)">查看详情</a-menu-item>
                  <a-modal
                    v-model:visible="permsVisible"
                    title="权限信息"
                    @ok="handleOk"
                  >
                    <div>
                      <a-table :data-source="permList" :columns="columns">
                          <template #bodyCell="{ column, record }">
                              <template v-if="column.key === 'checked'">
                                <span v-if="record.checked">
                                  <a><check-circle-two-tone two-tone-color="#52c41a" /></a>

                                </span>
                                <span v-else>
                                  <close-circle-two-tone two-tone-color="#e74c3c"/>
                                </span>
                              </template>
                          </template>
                      </a-table>
                    </div>
                    <!--自定义组件-->
                  </a-modal>
                </a-menu>
              </template>
              <a-button>
                操作
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
import {get} from '@/common';
import {CheckCircleTwoTone, CloseCircleTwoTone} from '@ant-design/icons-vue';

export default defineComponent({
  components: {CheckCircleTwoTone, CloseCircleTwoTone},
  data(){
    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '权限名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '父ID',
        dataIndex: 'pid',
        key: 'pid',
      },
      {
        title: '前端接口',
        dataIndex: 'clientPath',
        key: 'clientPath',
      },
      {
        title: '后端接口',
        dataIndex: 'serverPath',
        key: 'serverPath',
      },
      {
        title: '状态',
        dataIndex: 'checked',
        key: 'checked',
      },
    ];
    const permsVisible = ref(false);
    return {
      roleList: reactive([]),
      query: reactive({
        pageSize: 5,
        pageNum: 1
      }),
      permList: reactive([]),
      columns: columns,
      permsVisible
    }
  },
  methods: {
    fetchRoleList(){
      get('/admin/role/list').then((res)=>{
        this.roleList=res.data.list
      });
    },
    fetchPermNode(_id){
      get('/admin/role/'+ _id+'/perm', this.query).then((res)=>{
        if(res.data!==null){
          this.permList=res.data.list;
        }
      })
    },
    showPerms(_rid){
      this.permsVisible = true;
      this.fetchPermNode(_rid)
    },
    handleOk(e){
      console.log(e);
      this.permsVisible = false;
    }
  },
  mounted() {
    this.fetchRoleList();
  },

  setup() {
  },
});
</script>

<style>
.autotitle {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.userm {
  padding: 10px 10px 10px;
}

.roles {
  height: auto;
  width: 80%;
  display: flex;
  box-shadow: 0px 0px 15px -10px gray;
  margin-top: 10px;
}

.rolesInfo {
  width: 850px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.rolesInfo-state {
  width: 500px;
  height: 100px;
  padding: 4px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.rolesName {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  margin-right: -2px;
  overflow: hidden;
  vertical-align: -2px;
}

.rolesBiog {
  color: #000;
  font-size: 14px;
  margin-top: 10px;
  line-height: 18px;
}

.rolesButton {
  display: flex;
  align-items: center;
  padding: 10px 0px 10px;
  margin-right: 15px;
}

.ant-modal-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  pointer-events: auto;
  width: 600px;
  height: auto;
}

.authority-part {
  width: 20px;
  height: 10px;
  background-color: aqua;
  margin-left: 3px;
  float: left;
}

.authority-part-info {
  width: 445px;
  height: 100px;
  list-style-type: none;
  padding: 22px 10px 10px;
}

.authority-part-instract {
  min-width: 200px;
}
.authority-part-button {
  display: flex;
  align-items: flex-end;
  padding: 10px 0px 10px;
  margin-left: 20px;
}
</style>